<template>
  <div class="child1">
    <!-- Tab表格 -->
    <el-table :data="list" style="width: 1880">
      <el-table-column
        prop="number"
        label="试题编号"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="subject"
        label="学科"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="catalog"
        label="目录"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="questionType"
        label="题型"
        width="120"
        :formatter="formatquestionType"
      ></el-table-column>
      <el-table-column
        prop="direction"
        label="题干"
        width="280"
      ></el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="180">
        <template slot-scope="{ row }">
          {{ row.addDate | formatDate }}
        </template>
      </el-table-column>
      <el-table-column
        prop="difficulty"
        label="难度"
        width="80"
        :formatter="formatdifficulty"
      ></el-table-column>
      <el-table-column
        prop="creator"
        label="录入人"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="chkState"
        label="审核状态"
        width="120"
        :formatter="formatchkType"
      ></el-table-column>
      <el-table-column
        prop="chkRemarks"
        label="审核意见"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="creator"
        label="审核人"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="publishState"
        label="发布状态"
        width="150"
        :formatter="formatpublishType"
      ></el-table-column>
      <!-- 右侧按钮 -->
      <el-table-column prop="address" label="操作" width="200" fixed="right">
        <template slot-scope="{ row }">
          <el-button type="text" size="small" @click="previewShowDialog = true">
            预览
          </el-button>
          <el-button
            type="text"
            size="small"
            :disabled="row.chkState !== 0"
            @click="suggestions(row)"
          >
            审核
          </el-button>
          <el-button
            type="text"
            size="small"
            :disabled="row.publishState !== 1"
            @click="$router.push('/questions/new')"
          >
            修改
          </el-button>
          <el-button type="text" size="small" @click="open(row)">
            {{ row.publishState === 1 ? '上架' : '下架' }}
          </el-button>
          <el-button
            type="text"
            size="small"
            :disabled="row.publishState !== 1"
            @click="deleteChoice(row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页加载 -->
    <div class="block">
      <el-pagination
        background
        :current-page="page.page"
        :page-size="page.size"
        :total="total"
        layout="prev, pager, next, sizes,jumper"
        @current-change="changePage"
      ></el-pagination>
    </div>
    <!-- 审核弹层 -->
    <el-dialog title="题目审核" width="400px" :visible.sync="showDialog">
      <el-row style="margin-bottom: 20px">
        <el-col>
          <el-radio v-model="radio" label="1">通过</el-radio>
          <el-radio v-model="radio" label="2">拒绝</el-radio>
        </el-col>
      </el-row>
      <el-row>
        <el-input
          v-model="textarea"
          placeholder="请输入审核意见"
          type="textarea"
          width="100%"
          style="margin-bottom: 60px"
        ></el-input>
      </el-row>
      <el-row type="flex" justify="end">
        <el-col :span="10">
          <el-button @click="btnCancel">取消</el-button>
          <el-button type="primary" @click="addSuggestions()">确认</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  choice,
  choicePublish,
  remove,
  choiceCheck
} from '@/api/hmmm/questions.js'
import {
  questionType,
  difficulty,
  chkType,
  publishType
} from '@/api/hmmm/constants.js'

export default {
  props: {
    chkState: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      list: [], // 数据列表
      total: 0, // 题目总数
      page: {
        page: 1, // 当前页码
        pagesize: 100,
        chkState: this.chkState // 审核状态
      },
      showDialog: false, // 审核弹层
      radio: 1,
      textarea: '',
      disabled: false,
      dialogRow: null
    }
  },
  mounted() {
    this.getchoice()
  },
  methods: {
    // 获取精选题库数据
    async getchoice() {
      try {
        const { data } = await choice(this.page)
        this.page.pagesize = data.pagesize
        this.total = data.counts
        this.list = data.items
      } catch (error) {
        console.log(error)
      }
    },
    changePage(newPage) {
      this.page.page = newPage
    },
    // 上架下架功能
    open(row) {
      if (row.publishState == 0) {
        this.$confirm('您确定下架这道题目吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await choicePublish({
              id: row.id,
              publishState: row.publishState == 0 ? 1 : 0 // 切换上架下架状态
            })
            this.getchoice()
            this.$message.success('下架成功!')
          })
          .catch((error) => {
            console.log(error)
          })
      } else {
        this.$confirm('您确定上架这道题目吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await choicePublish({
              id: row.id,
              publishState: row.publishState == 0 ? 1 : 0 // 切换上架下架状态
            })

            this.getchoice()
            this.$message.success('上架成功!')
          })
          .catch((error) => {
            console.log(error)
          })
      }
    },
    // 删除功能
    deleteChoice(row) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: row.id })
          this.$message.success('删除成功!')
          this.getchoice()
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 获取数据
    suggestions(row) {
      this.showDialog = true
      this.dialogRow = row
    },
    // 审核弹层
    async addSuggestions() {
      if (this.textarea) {
        await choiceCheck({
          id: this.dialogRow.id,
          chkState: +this.radio,
          chkRemarks: this.textarea
        })
        this.getchoice()
        this.$message.success('操作成功')
        this.showDialog = false
      } else {
        this.$message.warning('请输入审核意见')
      }
    },
    // 审核弹层取消时
    btnCancel() {
      this.textarea = ''
      this.showDialog = false
    },
    // 格式化方法
    // 题型
    formatquestionType(row, column, cellValue, index) {
      const obj = questionType.find((item) => item.value + '' == cellValue) // cellValue是单元格值
      return obj ? obj.label : '未知'
    },
    // 难度
    formatdifficulty(row, column, cellValue, index) {
      const obj = difficulty.find((item) => item.value + '' == cellValue) // cellValue是单元格值
      return obj ? obj.label : '未知'
    },
    // 审核状态
    formatchkType(row, column, cellValue, index) {
      const obj = chkType.find((item) => item.value + '' == cellValue) // cellValue是单元格值
      return obj ? obj.label : '未知'
    },
    // 判断发布状态和审核状态
    formatpublishType(row, column, cellValue, index) {
      const obj = publishType.find((item) => item.value + '' == cellValue) // cellValue是单元格值
      // 如果发布状态为0且审核状态不等于1，是待发布
      if (cellValue === 0 && row.chkState !== 1) {
        return '待发布'
      }
      return obj ? obj.label : '未知'
    }
  }
}
</script>

<style scoped>
.block {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
